<!DOCTYPE html>
<html>
<head>
	<title>11种loading特效整理</title>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html;">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="css/loading.css">
  
    <script type="text/javascript" src="js/prefixfree.min.js"></script>

    <script type="text/javascript" src="js/loading.js"></script>

</head>
<body>
<!-- 第一种loading特效 依次拉伸-->
<h3>第一种特效:从左到右依次拉伸</h3>
<div class="load1">
	<div class="rect1"></div>
	<div class="rect2"></div>
	<div class="rect3"></div>
	<div class="rect4"></div>
	<div class="rect5"></div>
</div>

<!-- 第二种特效,两次翻转 -->
<h3>第二种特效:先上下翻转，再左右翻转</h3>
<div class="load2"></div>

<!-- 第三种特效,两个圆轮流放大缩小 -->
<h3>第三种特效:两个圆轮流放大缩小</h3>
<div class="load3">
	<div class="double-bounce1"></div>
	<div class="double-bounce2"></div>
</div>

<!-- 第四种特效,两个方块旋转换位 -->
<h3>第四种特效,两个方块旋转换位</h3>
<div class="load4">
	<div class="cube1"></div>
	<div class="cube2"></div>
</div>

<!-- 第五种特效,两个圆旋转换位 -->
<h3>第五种特效,两个圆旋转换位</h3>
<div class="load5">
	<div class="dot1"></div>
	<div class="dot2"></div>
</div>

<!-- 第六种特效,三个圆放大缩小 -->
<h3>第六种特效,三个圆依次放大缩小</h3>
<div class="load6">
	<div class="bounce1"></div>
	<div class="bounce2"></div>
	<div class="bounce3"></div>
</div>

<!-- 第七种特效,放大特效  -->
<h3>第七种特效,放大特效 </h3>
<div class="load7"></div>

<!-- 第八种特效,旋转放大缩小 -->
<h3>第八种特效,小圆旋转依次放大缩小</h3>
<div class="load8">

	<div class="load8-container container1">
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
	</div>

	<div class="load8-container container2">
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
	</div>

	<div class="load8-container container3">
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
	</div>

</div>

<!-- 第九种3D波浪特效wave -->
<h3>第九种3D wave 波浪特效</h3>
	<div class='base'>
		<div class='cube'></div>
		<div class='cube'></div>
		<div class='cube'></div>
		<div class='cube'></div>
		<div class='cube'></div>
		<div class='cube'></div>
		<div class='cube'></div>
		<div class='cube'></div>
		<div class='cube'></div>
	</div>

<br>
<br>
<br>
<!--  -->

 <div class="circle-loader">

        <div class="circle-line">
            <div class="circle circle-blue"></div>
            <div class="circle circle-blue"></div>
            <div class="circle circle-blue"></div>
        </div>
        <div class="circle-line">
            <div class="circle circle-yellow"></div>
            <div class="circle circle-yellow"></div>
            <div class="circle circle-yellow"></div>
        </div>
        <div class="circle-line">
            <div class="circle circle-red"></div>
            <div class="circle circle-red"></div>
            <div class="circle circle-red"></div>
        </div>
        <div class="circle-line">
            <div class="circle circle-green"></div>
            <div class="circle circle-green"></div>
            <div class="circle circle-green"></div>
        </div>
</div>
<h3 style="position: relative;margin:0;">第十种,贪吃蛇状旋转拉伸变换</h3>
<br>
<br><br><br>
<!-- 第十一种 -->
<h3>第十一种,进度条加载</h3>
<div class="mvTxt">Loading
	<span class="mvSq">.</span>
	<span class="mvSq">.</span>
	<span class="mvSq">.</span>
</div>
<div class="mvBox">
 	<img id="mvBtn" class="mvBtn" src="img/test1.jpg" />
</div>
<br><br><br><br>
</body>
</html>